<template>
  <s-layout class="set-wrap" title="余额" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />

    <view class="flex flex-col gap-4 p-4">
      <view
        class="flex overflow-hidden flex-col gap-4 p-4 bg-center bg-no-repeat bg-cover rounded-lg"
        style="background-image: url('/static/18929029006.png')"
      >
        <view class="text-[16px] text-white/60">可提现余额(元)</view>
        <view class="text-[28px] text-[#FFFFFF]">55555</view>
        <view>
          <view class="gap-3 flex items-center h-[32px]">
            <view class="grid place-items-center px-8 h-full bg-white rounded-lg" @click="toRecharge">
              <view class="text-[14px] text-[#0078D3]">充值</view>
            </view>
            <view class="grid place-items-center px-8 h-full bg-white rounded-lg" @click="toWithdraw">
              <view class="text-[14px] text-[#0078D3]">提现</view>
            </view>
          </view>
        </view>
      </view>
      <view class="flex flex-col gap-1">
        <view class="flex justify-between items-center">
          <view class="text-[18px] text-[#181818] font-bold">收支明细</view>
          <view class="h-[34px] bg-[#FFFFFF] px-3 rounded-full flex items-center gap-1" @click="state.showDatePicker = true">
            <text class="text-[13px] text-[#757576]">日期选择</text>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="flex gap-2 items-center">
          <view class="text-[14px] text-[#6E6E6E]">总收入 <text class="text-[#0078D3]">666</text></view>
          <view class="text-[14px] text-[#6E6E6E]">总支出 <text class="text-[#0078D3]">666</text></view>
        </view>
      </view>
      <view class="flex flex-col gap-3">
        <view v-for="(i, k) in 10" :key="k" class="flex justify-between items-center p-4 bg-white rounded-lg">
          <view class="g flex gap-2 items-center">
            <image src="/static/13747966712.png" class="size-6 bg-gray-50" mode="scaleToFill" />
            <view class="flex flex-col gap-1">
              <view class="text-[15px] text-[#181818]">购买商品</view>
              <view class="text-[13px] text-[#9D9D9D]">2025-09-12 12:34:12</view>
            </view>
          </view>
          <view class="text-[18px] text-[#F83E3E] font-bold">+6.00</view>
        </view>
      </view>
    </view>

    <!-- 时间选择器 -->
    <u-datetime-picker :show="state.showDatePicker" v-model="state.date" mode="year-month" @confirm="confirm"></u-datetime-picker>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    list: [],
    date: Number(new Date()),
    loading: true,
    showDatePicker: false,
  });

  function getList() {}
  onLoad(() => {
    getList();
  });
  function toRecharge() {}
  function toWithdraw() {}
  function confirm() {
    state.value.showDatePicker = false;
  }
</script>

<style lang="scss" scoped></style>
